<template>
  <div>
    <div class="sys-breadcrumb">
      数据源管理
      <el-button-group class="sys-breadcrumb-handle">
        <el-button type="text" @click="add"  icon="el-icon-circle-plus">新增数据源</el-button>
      </el-button-group>
    </div>
    <el-card>
      <el-table :data="list" style="width: 100%" border stripe>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="driver" label="驱动"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="form.id == 0 ? '新增数据源': '编辑数据源'" :visible.sync="form.show">
      <el-form ref="form" status-icon :model="form" :rules="rules">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.descMsg" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
          <el-radio-group v-model="form.typeId" @change="setTypes">
            <el-radio-button :label="type.id" v-for="type in types">{{type.name}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驱动" :label-width="formLabelWidth" prop="type" v-if="drivers.length > 0">
          <el-radio-group  v-model="form.driverId">
            <el-radio :label="driver.id" v-for="driver in drivers">{{driver.name}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="URL" :label-width="formLabelWidth" prop="url">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span style="color:#67C23A; font-size: 14px;" v-if="flash === 1"><i class="el-icon-success"></i>连接成功</span>
        <span style="color:#F56C6C; font-size: 14px;" v-if="flash === 2 "><i class="el-icon-error"></i>连接失败</span>
        <el-button @click="testdb">测试连接</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Services from "@/services";
import { setTimeout, setInterval } from 'timers';
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入名称"));
      } else {
        callback();
      }
    };
    return {
      formLabelWidth: "80px",
      form: {
        id: 0,
        show: false,
        name: "",
        descMsg: "",
        typeId: "0",
        type: "",
        url: "",
        driverId: "",
        driver: "",
        username: "",
        password: ""
      },
      flash: 0,
      list: [],
      types: [],
      drivers: [],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        url: [{ required: true, message: '请输入HOST', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],

      }
    };
  },
  created() {
    this.http();
    Services.DATABASE_TYPE().then(res => {
      this.types = res
    })
  },
  methods: {
    http() {
      Services.DATABASE_LIST().then(res => {
        this.list = res;
      });
    },
    setTypes(e){
      this.form.typeId = e
      this.types.forEach(type => {
        if(type.id === e) {
          this.form.type = type.name
        }
        
      })
      Services.DATABASE_DRIVER({
        dbType: e
      }).then( res => {
        this.drivers = res
        this.form.driverId = res[0].id
        this.form.driver = res[0].name
      })
    },

    testdb() {
      Services.DATABASE_TEST(this.form).then(res => {
        console.log(res);
        if(res.code == 0){
          this.flash = 1
        } else {
          this.flash = 2
        }
        const vm = this
        setTimeout(function(){
          vm.flash = 0
        },2500)
      });
    },
    
    add() {
      this.form = {
        id: 0,
        show: true,
        name: "",
        descMsg: "",
        typeId: "",
        driverId: "",
        driver: "",
        url: "",
        port: "",
        dbname: "",
        username: "",
        password: ""
      }
      this.drivers = []
    },
    edit(database) {
      Services.DATABASE_DRIVER({
        dbType: database.typeId
      }).then( res => {
        this.drivers = res
      })
      this.form = {
        ...database,
        show: true
      };
    },
    remove(database) {
      this.$confirm("此操作将永久删除该数据源, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        Services.DATABASE_REMOVE({
          id: database.id
        }).then(res => {
          this.http()
        });
      });
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if(this.form.id == 0){
            Services.DATABASE_ADD(this.form).then(res => {
              if(res.code == 0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.form.show = false
                this.http()
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                });
              }
            })
          } else {
            Services.DATABASE_EDIT(this.form).then(res => {
              if(res.code == 0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.form.show = false
                this.http()
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                });
              }
            })
          }
        }
      });
    },
  }
};
</script>
<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
